<template>
  <div class="registerForm">
    <div class="register-header">
      <div class="register-header-top">

      </div>
      <div class="register-inner-header-text">
        <ul>
          <li>选择注册类型</li>
          <li>填写资料</li>
          <li>注册成功</li>
        </ul>
      </div>
    </div>
    <!--            注册公司-->
    <div v-if="is_have_code==1" style="padding-top: 54px">
      <el-form ref="registerForm_com" :model="registerForm_com" :rules="registerRule_com">
        <el-form-item prop="comName" class="registerForm-item">
          <span class="span">*</span>
          <div class="i ic_company_nor"></div>
          <el-input type="text" placeholder="请输入企业名称" v-model="registerForm_com.comName"
          ></el-input>
        </el-form-item>
        <el-form-item prop="userName" class="registerForm-item">
          <span class="span">*</span>
          <div class="i ic_name_nor"></div>
          <el-input type="text" placeholder="请输入姓名" v-model="registerForm_com.userName"
          ></el-input>
        </el-form-item>
        <el-form-item prop="phone" class="registerForm-item">
          <span class="span">*</span>
          <div class="i ic_tel_nor"></div>
          <el-input type="text" placeholder="请输入手机号" v-model="registerForm_com.phone"
          ></el-input>
        </el-form-item>
        </el-form-item>
        <el-form-item prop="vCode" class="registerForm-item registerForm-item-code">
          <span class="span">*</span>
          <div class="i ic_code_nor"></div>
          <el-input type="text" placeholder="请输入验证码" v-model="registerForm_com.vCode"
          ></el-input>
          <el-button @click="getSendCode('registerForm_com')" class="getCodeBtn" :disabled="sendCodeType">{{sendCodeCount}}</el-button>
        </el-form-item>
        <el-form-item prop="password" class="registerForm-item">
          <span class="span">*</span>
          <div class="i ic_lock_nor"></div>
          <el-input type="text" placeholder="请设置登录密码" v-model="registerForm_com.password"
          ></el-input>
        </el-form-item>
        <el-form-item class="registerForm-item registerForm-item-bm">
          <el-select placeholder="请选择了解途径" v-model="registerForm_com.tuJing">
            <el-option value="朋友邀请">
              朋友邀请
            </el-option>
            <el-option value="线上广告">
              线上广告
            </el-option>
            <el-option value="宣传册">
              宣传册
            </el-option>
            <el-option value="其它">
              其它
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="registerForm-item">
          <div class="next-btn" @click="registerCompany('registerForm_com')">下一步</div>
        </el-form-item>
      </el-form>
    </div>
    <!--            注册账号-->
    <div v-if="is_have_code==2" style="padding-top: 54px">
      <el-form ref="registerForm" :model="registerForm" :rules="registerRule">
        <el-form-item prop="comCode" class="registerForm-item">
          <span class="span">*</span>
          <div class="i ic_company_code_nor"></div>
          <el-input type="text" placeholder="请输入企业码" v-model="registerForm.comCode" @blur="getBmList"
          ></el-input>
        </el-form-item>
        <el-form-item prop="userName" class="registerForm-item">
          <span class="span">*</span>
          <div class="i ic_name_nor"></div>
          <el-input type="text" placeholder="请输入姓名" v-model="registerForm.userName"
          ></el-input>
        </el-form-item>
        <el-form-item prop="phone" class="registerForm-item">
          <span class="span">*</span>
          <div class="i ic_tel_nor"></div>
          <el-input type="text" placeholder="请输入手机号" v-model="registerForm.phone"
          ></el-input>
        </el-form-item>
        <el-form-item prop="vCode" class="registerForm-item registerForm-item-code">
          <span class="span">*</span>
          <div class="i ic_code_nor"></div>
          <el-input type="text" placeholder="请输入验证码" v-model="registerForm.vCode"
          ></el-input>
          <el-button @click="getSendCode('registerForm')" class="getCodeBtn" :disabled="sendCodeType">{{sendCodeCount}}</el-button>
        </el-form-item>
        <el-form-item prop="password" class="registerForm-item">
          <span class="span">*</span>
          <div class="i ic_lock_nor"></div>
          <el-input type="text" placeholder="请设置登录密码" v-model="registerForm.password"
          ></el-input>
        </el-form-item>
        <el-form-item prop="bmName" class="registerForm-item registerForm-item-bm" v-show="is_show_bm">
          <span class="span">*</span>
          <el-select placeholder="请选择部门" v-model="registerForm.bmName">
            <el-option :value="item.id" v-for="(item ,index) in bm_list" :key="index" :label="item.name">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="registerForm-item">
          <div class="i ic_zw"></div>
          <el-input type="text" placeholder="请输入职位" v-model="registerForm.zhiWei"
          ></el-input>
        </el-form-item>
        <el-form-item class="registerForm-item">
          <div class="next-btn" @click="registerSubmit('registerForm')">下一步</div>
        </el-form-item>
      </el-form>
    </div>
    <!--    图片验证码-->
    <el-dialog
      :visible.sync="isShowKaptchaRender"
      title="效验"
      width="400px"
    >
      <div style="text-align:center">
        <div style="padding-bottom:10px;">
          <img :src="serverIp+'/user/verify/img?randomNum='+imgageCodeUrl"
               @click="imgageCodeUrl = Math.ceil(Math.random() * 1000000)">
        </div>

        <el-input type="text" placeholder="请输入验证码" v-model="imageCode" style="width:60%;" :maxlength="6"
                  autocomplete="off"></el-input>


      </div>
      <div slot="footer">
        <el-button type="primary" style="margin-left:0;" long @click="kaptchaRenderOk">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "RegisterForm",
    data() {
      const validatePhoneIsExist = (rule, value, callback) => {
        var reg = /^1\d{10}$/;
        if (value === '') {
          callback(new Error('请输入手机号'));
        } else if (!reg.test(value)) {
          callback(new Error('请输入正确的手机号'));
        } else {
          this.$http.post('/user/user/isExist', {phone: value}).then(res => {
            if (res.statusCode === 200) {
              if (res.data.isExist == true) {
                callback('手机号已注册');
              } else {
                callback();
              }
            } else {
              callback();
            }
          })
        }
      };
      const validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else if (this.getBLen(value) <= 3) {
          callback(new Error('设置密码最少为四位数'));
        } else {
          callback();
        }
      };
      return {
        yiscn_rigster_phone:'',
        is_have_code: 1,//1:有企业吗，2:无企业吗
        registerForm: {
          phone: '',
          comCode: '',
          userName: '',
          vCode: '',
          password: '',
          bmName: '',
          zhiWei: ''
        },//注册账号
        registerRule: {
          phone: [
            {required: true, validator: validatePhoneIsExist, trigger: 'blur'}
          ],
          userName: [
            {required: true, message: '请输入姓名', trigger: 'blur'}
          ],
          comCode: [
            {required: true, message: '请输入企业码', trigger: 'blur'}
          ],
          vCode: [
            {required: true, message: '请输入验证码', trigger: 'blur'}
          ],
          password: [
            {required: true, trigger: 'blur', validator: validatePass}
          ],
          bmName: [
            {required: true, message: '请选择所属部门', trigger: 'blur'}
          ]
        },
        registerForm_com: {
          phone: '',
          comName: '',
          userName: '',
          vCode: '',
          password: '',
          tuJing: '',
          qyNum: '',
        },//注册公司
        registerRule_com: {
          phone: [
            {required: true, validator: validatePhoneIsExist, trigger: 'blur'}
          ],
          userName: [
            {required: true, message: '请输入姓名', trigger: 'blur'}
          ],
          comName: [
            {required: true, message: '请输入企业名称', trigger: 'blur'}
          ],
          vCode: [
            {required: true, message: '请输入验证码', trigger: 'blur'}
          ],
          password: [
            {required: true, trigger: 'blur', validator: validatePass}
          ]
        },
        sendCodeType: false,
        sendCodeCount: '获取验证码',
        bm_list: [],//部门列表
        is_show_bm: false,
        imageCode: '',
        imgageCodeUrl: '',
        isShowKaptchaRender: false, //验证码弹窗
      }
    },
    created() {
      this.is_have_code = this.$route.query.is_have_code;
      this.registerForm.comCode=this.$route.query.comCode||'';
      if(this.registerForm.comCode!=''){
        this.getBmList();
      }
      this.yiscn_rigster_phone=localStorage.getItem("yiscn_rigster_phone")||'';
      if(this.yiscn_rigster_phone!=''){
        this.registerForm_com.phone=this.yiscn_rigster_phone;
      }else {
        this.registerForm.phone=this.yiscn_rigster_phone;
      }
    },
    methods: {
      //获取部门
      getBmList() {
        let comCode = this.registerForm.comCode;
        let _this = this;
        if(comCode){
          //查询公司
          this.$http.get('/user/company/isExist?comCode='+comCode).then(function (res) {
            let d = res.data;
            if (d == true) {
              //查询部门
              _this.$http.post('user/department/deptList', {
                comCode: comCode
              }).then(function (res) {
                let d = res.data;
                //查询企业人数是否上限
                _this.$http.post('/user/company/limit', {comCode:comCode}).then((res) => {
                  console.log(res);
                  if (res.data == true) {
                    console.log("继续执行")
                  } else {
                    _this.$message.error('当前用户数已达预设上限，请联系我们的商业顾问，谢谢！');

                  }
                });
                _this.bm_list = d;
                if (d.length > 0) {
                  _this.is_show_bm = true;
                }
              }).catch(function (err) {
                console.log(err);
              })
            } else {
              _this.$message.error('不存在该企业');
            }

          }).catch(function (err) {
            console.log(err);
          })
        }
      },
      //注册账号
      registerSubmit(name) {
        var _this = this;
        this.$refs[name].validate((valid) => {
          if (valid) {
            var json = {
              phone: _this.registerForm.phone,
              comCode: _this.registerForm.comCode,
              name: _this.registerForm.userName,
              departmentId: _this.registerForm.bmName,
              position: _this.registerForm.zhiWei,
              password: _this.registerForm.password,
              code: _this.registerForm.vCode
            };
            _this.$http.post('/user/user/registerUser', json).then(res => {
              if (res.statusCode === 200) {
                  _this.$router.push({path: '/register/registerSuccess'})
              } else {
                _this.$message.error(_data.statusMsg);
              }
            }).catch(error => {
              console.log(error)
            });
          }
        })
      },
      //获取图片验证码
      getSendCode(name){
        var _this = this;
        this.$refs[name].validateField('phone', (valid) => {
          if (!valid) {
            _this.isShowKaptchaRender = true;
            _this.imgageCodeUrl = Math.ceil(Math.random() * 1000000);
            _this.sendCodePhone = _this[name].phone;
            _this.imageCode = '';
          }
        })
      },
      //获取手机验证码
      kaptchaRenderOk(){
        if (this.imageCode == '') {
          this.$message.error("请输入验证码");
          return;
        }
        let _this = this;
        this.$http.post("/user/verify/sendCode", {
          phone: this.sendCodePhone,
          imageCode: this.imageCode,
          randomNum: this.imgageCodeUrl
        }).then(res => {
          let data = res;
          if (data.statusCode == 200) {
            _this.isShowKaptchaRender = false;
            _this.$message.success("发送成功");
            _this.sendCodeType = true;
            _this.sendCodeCount = '60秒';
            var count = 59, indexS = '';
            function countTimeout() {
              indexS = setTimeout(function () {
                if (count <= 1) {
                  _this.sendCodeType = false;
                  _this.sendCodeCount = '获取验证码';
                } else {
                  count -= 1;
                  _this.sendCodeCount = count + '秒';
                  countTimeout();
                }
              }, 1000);
            }

            countTimeout();
          } else {
            this.$message.error( data.statusMsg);
            this.imageCode = '';
            this.imgageCodeUrl = Math.ceil(Math.random() * 1000000);
          }
        });
      },
      //获取字符串长度
      getBLen(str) {
        if (str == null) return 0;
        if (typeof str != "string") {
          str += "";
        }
        return str.replace(/[^\x00-\xff]/g, "01").length;
      },
      //创建企业
      registerCompany(name) {
        var _this = this;
        this.$refs[name].validate((valid) => {
          if (valid) {
            var json = {
              comName: _this.registerForm_com.comName,
              name: _this.registerForm_com.userName,
              phone: _this.registerForm_com.phone,
              code: _this.registerForm_com.vCode,
              password: _this.registerForm_com.password,
              roadWay: _this.registerForm_com.tuJing,
            };
            _this.$http.post('/user/company/registerCompany', json).then(res => {
              if (res.statusCode === 200) {
                _this.$router.push({path: '/register/registerSuccess'})
              } else {
                _this.$message.error(res.statusMsg);
              }
            }).catch(error => {
              console.log(error)
            });
          }
        })
      },
    }
  }
</script>

<style scoped type="text/scss" lang="scss">
  .registerForm {
    width: 1200px;
    height: 850px;
    background-color: #FFFFFF;
    padding-top: 50px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;

    .register-header {
      width: 1000px;
      margin: 0 auto;
      padding-bottom: 40px;
      border-bottom: 1px solid #eeeeee;

      .register-header-top {
        background-image: url("../../assets/img/register/step2_03.png");
        width: 580px;
        height: 36px;
        background-position: center;
        background-size: cover;
        margin: 0 auto;
      }

      .register-inner-header-text {
        width: 580px;
        height: 36px;
        margin: 0 auto;
        font-size: 16px;
        color: #7392AD;

        ul {
          overflow: hidden;
          padding-top: 20px;
          text-align: left;

          li {
            list-style: none;
            float: left;
          }

          li:nth-child(1) {
            width: 212px;
          }

          li:nth-child(2) {
            width: 212px;
            padding-left: 45px;
          }

          li:nth-child(3) {
            width: 127px;
            text-align: right;
          }

        }
      }
    }


  }
</style>
<style type="text/scss" lang="scss">
  .registerForm {
    .el-form {
      padding-left: 437px;

      .registerForm-item {
        position: relative;
        width: 360px;

        .next-btn {
          width: 355px;
          height: 56px;
          line-height: 56px;
          text-align: center;
          color: #FFFFFF;
          border-radius: 6px;
          background-color: #1192fa;
          font-size: 20px;
          cursor: pointer;
          margin-top: 16px;
        }

        .span {
          position: absolute;
          left: -20px;
          top: 5px;
          color: #e44120;
        }

        .i {
          width: 20px;
          height: 20px;
          left: 10px;
          top: 13px;
          position: absolute;
          background-repeat: no-repeat;
          background-position: center;
          background-size: cover;
          z-index: 10;
        }

        .ic_name_nor {
          background-image: url("../../assets/img/register/ic_name_nor.png");
        }

        .ic_company_code_nor {
          background-image: url("../../assets/img/register/ic_company_code_nor.png");
        }

        .ic_tel_nor {
          background-image: url("../../assets/img/register/ic_tel_nor.png");
        }

        .ic_code_nor {
          background-image: url("../../assets/img/register/ic_code_nor.png");
        }

        .ic_lock_nor {
          background-image: url("../../assets/img/register/ic_lock_nor.png");
        }

        .ic_zw {
          background-image: url("../../assets/img/register/zw.png");
        }

        .ic_company_nor {
          background-image: url("../../assets/img/register/ic_company_nor.png");
        }

        .el-input__inner {
          padding: 0 45px;
          line-height: 45px;
          height: 45px;
          font-size: 16px;
        }
      }

      .registerForm-item-bm {
        .el-input__inner {
          padding: 0 10px;
          line-height: 45px;
          height: 45px;
          font-size: 16px;
        }
        .el-select{
          width: 100%;
        }
      }

      .registerForm-item-code {
        width: 220px;
        position: relative;

        .getCodeBtn {
          position: absolute;
          right: -135px;
          top: 4px;
          width: 110px;
          height: 36px;
          color: #FFFFFF;
          font-size: 14px;
          text-align: center;
          background-color: #1192fa;
          border-radius: 6px;
          cursor: pointer;
        }
      }
    }

  }

</style>
